<!-- eslint-disable vue/multi-word-component-names -->
<!-- 收藏 -->
<template>
  <div style="text-align: left;" >
  <el-card class="box-card" style="padding-bottom:0px;min-height:80vh">
    <span class="h11"><b>我收藏的课程</b></span>
    <div style="height: 10px"></div>
    <!-- <el-card></el-card> -->
    <div class="div11" v-if="this.tabData !== '暂无收藏'">
      <div class="div22">
        <span class="span11">课程信息</span>
        <span class="span22">金额</span>
        <span class="span33">操作</span>
      </div>
      <div class="div33"  v-for="tableData in tableData" :key="tableData.id">
        <div style="height: 16px"></div>
        <div class="divv"></div>
        <div class="div44" @click="routerCourseVideo(tableData)">
          <el-image style="width: 100%; height: 100%;" :src=" 'http://101.43.223.224:8765/image/getImageById?id=' + tableData.courseImg"></el-image>
        </div>
        <div style="width: 10px; float: left; height: 50px"></div>
        <div class="div55"><span style="font-size: 14px;">
        {{tableData.courseTitle}}
        </span></div>
        <div style="width: 18px; float: left; height: 50px"></div>
        <div class="div66"><span style="font-size: 14px;color: rgb(244,98,31);">
        ￥{{tableData.coursePrice}}
        </span></div>
        <div style="width: 27px; float: left; height: 50px"></div>
        <div class="div77">
          <el-button class="sb"  type="text" @click="dialogVisiblebutton(tableData)">取消收藏</el-button>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="20%">
          <span style="margin-left:10px;">确定取消 <i style="color:RGB(100,150,255)">{{courseTitlename.courseTitle}}</i> 的收藏嘛</span>
          <div style="margin-left:30%;margin-top:20px">
            <el-button size="mini" @click="dialogVisible = false" >取消</el-button>
            <el-button size="mini" @click="deleBookMark(courseTitlename.bid)">确定</el-button>
          </div>
        </el-dialog>
      </div>
<!-- ----------------------------------------------------------------------------------------------------------------------- -->
    </div>
    <!-- 空状态 -->
      <div class="content-wrappers" v-else>
        <i class="el-icon-warning-outline"></i>
        <span class="message">暂无收藏，去找些<span style="color:rgb(63, 185, 103);" class="span111" @click="routerHomes">感兴趣的课程</span>吧！</span>
      </div>
  </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderManagement',
  data () {
    return {
      user: {},
      tablength: [], // 用来显示数组长度 长度为0就说明没有数据 返回暂无数据
      tableData: [],
      dialogVisible: false,
      courseTitlename: '',
      tabData: ''
    }
  },
  mounted () {
    this.user = JSON.parse(localStorage.getItem('user')).data
    this.getBookMark()
  },
  methods: {
    routerHomes () {
      this.$router.push('/homes')
    },
    routerCourseVideo (tableData) {
      this.$router.push({
        path: '/courseVideo',
        query: {
          roid: JSON.stringify(tableData)
        }
      })
    },
    dialogVisiblebutton (row) {
      this.courseTitlename = row
      this.dialogVisible = true
    },
    deleBookMark (bid) {
      const form = new FormData()
      form.set('id', bid)
      this.$axios
        .post('/bookMark/delBookMark', form)
        .then((res) => {
          if ((res.data.data.code === 200)) {
            this.$message.success(res.data.data.data)
            this.dialogVisible = false
            this.getBookMark()
          } else {
            this.$message.error(res.data.data.data)
          }
        })
        .catch(() => {
          this.myMessage('info', '网络异常')
        })
    },
    getBookMark () {
      this.$axios
        .get('/bookMark/getBookMark', {
          params: {
            uid: this.user.id
          }
        })
        .then((res) => {
          if (res.data.data.code === 200) {
            this.tablength = res.data.data.data
            if (this.tablength.length === 0) {
              this.tabData = '暂无收藏'
            } else {
              this.tableData = this.tablength
            }
          }
        })
        .catch(() => {
        })
    }
  }
}
</script>

<style>
  .h11{
    font-size: 18px;
  }
  .div77{
    width: 14%;
    height: 80%;
    float: left;
    margin-top: 5px;
    /* background: blue; */
  }
  .div66{
    width: 12%;
    height: 80%;
    float: left;
    margin-top: 10px;
    /* background: blue; */
  }
  .div55{
    width: 52%;
    height: 80%;
    float: left;
    text-align: left;
    /* background: blue; */
  }
  .div44{
    width: 88px;
    height: 51px;
    float: left;
    cursor: pointer;
    /* background: red; */
  }
  .divv{
    width: 3%;
    height: 10%;
    float: left;
    /* background: black; */
  }
  .div33{
    width: 100%;
    height: 82px;
    background: white;
  }
  .span33{
    font-size: 14px;
    color: #999999;
    padding-left: 12%;
  }
  .span22{
    font-size: 14px;
    color: #999999;
    padding-left: 60%;
  }
  .span11{
    font-size: 14px;
    color: #999999;
    padding-left: 3%;
    line-height: 40px;
  }
  .div22{
    width: 100%;
    height: 40px;
    background: rgb(248,248,248);
    /* background: greenyellow; */
  }
  .div11{
    width: 758px;
    height: 100%;
    /* background: red; */
  }
  .sb:hover{
    color: #7ab2fa;
  }
  .box-card {
  margin: 0 auto;
  border-radius: 10px;
  }
  .el-button--text {
    border-color: transparent;
    color: #3d3d3d;
    background: 0 0;
    padding-left: 0;
    padding-right: 0;
}
.el-icon-warning-outline {
  font-size: 30px;
  margin-right: 10px;
}
.message {
  font-size: 20px;
}
.content-wrappers {
  display: flex;
  align-items: center;
  margin-left: 25%;
  margin-top: 10%;
}
</style>
